<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <!--    <el-aside width="30%" style="background-color: rgb(238, 241, 246); border: 1px solid #eee">-->
    <!--      侧边栏容器-->
    <!--    </el-aside>-->

    <el-container>
      <el-header style="height: 65px; text-align: center; font-size: 12px; border: 1px solid #8B8B8B">
        <el-menu :default-openeds="['']" mode="horizontal">
          <el-menu-item index="1">
            <template slot="title"><i class="el-icon-s-home" @click="app"></i>首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </template>
            <template slot="title"><i class="el-icon-menu"></i>系统设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </template>
            <template slot="title"><i class="el-icon-setting"></i>配置管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </template>
            <template slot="title"><i class="el-icon-setting"></i>测试</template>
          </el-menu-item>
        </el-menu>
      </el-header>

      <el-main style="height: 990px; font-size: 25px; border: 1px solid #8B8B8B">

        <el-row :gutter="10">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="待办" name="first">待办</el-tab-pane>
                <el-tab-pane label="发起" name="second">发起</el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-tabs v-model="activeName4" @tab-click="handleClick">
                <el-tab-pane label="集团新闻" name="first">集团新闻</el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">r1c3</div>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="6">
            <div class="grid-content2 bg-purple">r2c1</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content2 bg-purple">
              <el-tabs v-model="activeName2" @tab-click="handleClick">
                <el-tab-pane label="通知" name="first">通知</el-tab-pane>
                <el-tab-pane label="通报" name="second">通报</el-tab-pane>
                <el-tab-pane label="公示" name="third">公示</el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content2 bg-purple">r2c3</div>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="6">
            <div class="grid-content3 bg-purple">r3c1</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content3 bg-purple">
              <el-tabs v-model="activeName3" @tab-click="handleClick">
                <el-tab-pane label="最新制度" name="first">最新制度</el-tab-pane>
                <el-tab-pane label="待阅制度" name="second">待阅制度</el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="10">
              <el-col :span="24">
                <div class="grid-content4 bg-purple">r3c3-1</div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <div class="grid-content4 bg-purple">r3c3-1</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>


      </el-main>
    </el-container>
    <el-footer style="height: 50px; text-align: center; font-size: 12px; border: 1px solid #8B8B8B">

    </el-footer>
  </el-container>
</template>

<script>

export default {
  name: "Demo",
  computed: {},
  data() {
    //   const item = {
    //     date: '2016-05-02',
    //     name: '王小虎',
    //     address: '上海市普陀区金沙江路 1518 弄'
    //   };
    //   return {
    //     tableData: Array(5).fill(item)
    //   }
    return {
      activeName: 'first',
      activeName2: 'first',
      activeName3: 'first',
      activeName4: 'first'
    };

  },
  methods: {
    app() {
      this.$router.push("/app")
    },
    configuration() {
      this.$router.push("/configuration")
    },
    event() {
      this.$router.push("/event")
    },
    user() {
      this.$router.push("/user")
    },
    headMerging() {
      this.$router.push("/head-merging")
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }

  },
  mounted() {
    // this.app();
  }
}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 250px;
  display: flex;
  //justify-content: center;
  //align-items: center;
}

.grid-content2 {
  border-radius: 4px;
  min-height: 300px;
  display: flex;
  //justify-content: center;
  //align-items: center;
}

.grid-content3 {
  border-radius: 4px;
  min-height: 350px;
  display: flex;
  //justify-content: center;
  //align-items: center;
}

.grid-content4 {
  border-radius: 4px;
  min-height: 165px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
